<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>首页 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css">
   <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
   <style>
      .btn_cls {
         padding: 15px 10px 10px 10px;
         width: 90%;
         font-size: 1.1rem;
      }

      .btn_cls i {
         font-size: 2.0rem;
         height: 3rem;
      }

      .btn_cls2 {
         padding: 15px 10px 10px 10px;
         width: 90%;
         text-align: left;
      }

      .btn_cls2 span {
         font-size: 1.2rem;
         height: 3rem;
      }

      .btn_cls2 div {
         font-size: 0.9rem;
         text-align: right;
      }

      table.imagetable {
         font-family: verdana, arial, sans-serif;
         font-size: 11px;
         color: #333333;
         border-width: 1px;
         border-color: #999999;
         border-collapse: collapse;
      }

      table.imagetable th {
         background: #9cbefd;
         border-width: 1px;
         padding: 8px;
         border-style: solid;
         border-color: #999999;
      }

      table.imagetable td {
         border-width: 1px;
         padding: 5px;
         border-style: solid;
         border-color: #999999;
         text-align: center;
      }
   </style>
</head>

<body style="background-color:#f8f8f8;margin: 20px;">
   <div id="app">

      <div v-show="dataLoading" style="text-align: center;padding-top: 100px;">
         <span style="font-size: 2rem;"><i class="el-icon-loading"></i> 获取数据中....</span>
      </div>

      <div v-show="!dataLoading" style="padding: 20px;"> 
         
         <table id="my_table" class="imagetable" style="width: 100%;">
            <thead>
               <tr>
                  <th>学习日期</th>
                  <th>学员姓名</th>
                  <th>学习内容</th>
                  <th>学习地点</th>
                  <th>学习时间</th>
                  <th>学习时长</th> 
                  <th>学员签名</th>
                  <th>合计学习时长</th>
                  <th>结果</th>
               </tr>
            </thead> 

            <tbody v-for="(monthData, i) in tableData">
               
               <tr v-if="monthData.study_list_size > 0" v-for="(studyData, j) in monthData.study_list" style="min-height: 40px;height:40px;" :style="{'backgroundColor':getBackgroundColor(monthData)}">
                  <td v-if="j == 0" :rowspan="monthData.study_list_size">{{monthData.year}} - {{monthData.month}}</td>
                  <td v-if="j == 0" :rowspan="monthData.study_list_size">{{monthData.student_name}}</td>
                  <td>{{studyData.course_name}}</td>
                  <td>驰程安全学习平台</td>
                  <td>{{ timestampToTime(studyData.send_time, "yyyy-MM-dd hh:mm") }}</td>
                  <td>{{studyData.read_minute}} 分钟</td> 
                  <td>
                     <el-image v-if="studyData.autograph_verify == 1" fit="fill" style="width: 120px; height: 60px;"
						:src="studyData.autograph"></el-image>
                  </td>
                  <td v-if="j == 0" :rowspan="monthData.study_list_size">{{monthData.study_minute}} 分钟</td>
                  <td v-if="j == 0" :rowspan="monthData.study_list_size">
                     <span v-if="monthData.study_status > 0" style="color:darkgreen;">通过</span>
                     <span v-if="monthData.study_status < 1" style="color:#b10c0c;">未通过</span>
                  </td>
               </tr>

               <tr v-if="monthData.study_list_size == 0" style="background-color: lightcoral;min-height: 40px;height:40px;">
                  <td>{{monthData.year}} - {{monthData.month}}</td>
                  <td>{{monthData.student_name}}</td>
                  <td>无</td>
                  <td>无</td>
                  <td>-</td>
                  <td>-</td> 
                  <td>-</td>
                  <td>0 分钟</td>
                  <td>
                     <span v-if="monthData.study_status < 1" style="color:#b10c0c;">未通过</span>
                  </td>
               </tr>

            </tbody>

         </table>
      </div>


   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js?t=29348"></script>

<script>
   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            tagHeight: window.innerHeight / 5, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
            dataLoading: false,     // 显示登录等待中
            tableData: {},           // 条目数据

         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      methods: {
         // 改变表格高度
         pageResize() {
            this.tagHeight = window.innerHeight / 5;
         },

         getBackgroundColor(item) {
            if(item.study_status < 1){
               return "lightcoral";
            } else {
               return "";
            }
         },

         asdfasdf(){
            console.log('sssssssssssssss');
         }


      },
   });

   // 给父级页面调用的方法
   function loadTableDataToCallback(id) {
      vm.dataLoading = true; 
      if (id > 0) {
         // 通过ID读取课件信息
         axios.get('/admin/student/' + id + '/2022/show/student_study!year_studentid.bu')
            .then(function (response) {
               if (response.data.code > 0) {
                  console.log(response.data.bundle);
                  vm.tableData = response.data.bundle;
               } else if (response.data.code == 0) { 
                  vm.tableData = response.data.bundle;
               } else {
                  vm.$message.error(response.data.msg);
               }
               vm.dataLoading = false;
            })
            .catch(function (error) {
               vm.$message.error('获取数据失败！' + error);
               vm.dataLoading = false;
            });
      } else {
         vm.$message.error('打开失败，错误的参数ID！');
         vm.dataLoading = false;
      }
   }

   // 自动执行，读取表格数据等
   function loadInitData() {


   } 
    
   loadInitData();

</script>

</html>